import { useAppSelector } from "@src/store";
import { Image, View, Text } from "@tarojs/components";
import React, { useCallback } from "react";
import orderIcon from "@assets/icons/order.png";
import likeIcon from "@assets/icons/like.png";
import historyIcon from "@assets/icons/history.png";
import subscribeIcon from "@assets/icons/subscribe.png";
import defaultAvatar from "@assets/images/defaultAvatar.jpg";
import "./index.scss";
import Taro from "@tarojs/taro";
import TabScreen from "@src/components/layout/TabScreen";
import { TouchableHighlight } from "react-native";

const My = () => {
    const { data } = useAppSelector(state => state.userInfo);
    const goUserDetail = useCallback(() => {
        Taro.navigateTo({
            url: "/pages/userEdit/index"
        });
    }, []);
    return (<TabScreen>
        <View className="my__topBar">
            {/* <Image className="my__topBar__icon" src={messageIcon} /> */}
        </View>
        <View className="my__profile" onClick={goUserDetail}>
            <Image src={data.avatar || defaultAvatar} className="my__profile__avatar" mode="aspectFit" />
            <View>
                <View className="my__profile__username" onClick={goUserDetail}>
                    {data.username}
                </View>
                <View className="my__profile__signature">
                    未设置个性签名
                </View>

            </View>
        </View>
        <View className="my__metaBar">
            <View className="my__metaBar__item">
                <Text className="my__metaBar__item__num">0</Text>
                <Text className="my__metaBar__item__label">获赞</Text>
            </View>
            <View className="my__metaBar__item">
                <Text className="my__metaBar__item__num">{data?.followed?.length || 0}</Text>
                <Text className="my__metaBar__item__label">粉丝</Text>
            </View>
            <View className="my__metaBar__item">
                <Text className="my__metaBar__item__num">{data?.follow?.length || 0}</Text>
                <Text className="my__metaBar__item__label">关注</Text>
            </View>
        </View>
        <View className="my__viewList">
            <View className="my__viewList__item">
                <Image className="my__viewList__item__icon--order" src={orderIcon} />
                <Text className="my__viewList__item__text">订单</Text>
            </View>
            <View className="my__viewList__item">
                <Image className="my__viewList__item__icon--like" src={likeIcon} />
                <Text className="my__viewList__item__text">心愿单</Text>
            </View>
            <View className="my__viewList__item">
                <Image className="my__viewList__item__icon--histroy" src={historyIcon} />
                <Text className="my__viewList__item__text">足迹</Text>
            </View>
            <View className="my__viewList__item">
                <Image className="my__viewList__item__icon--subscribe" src={subscribeIcon} />
                <Text className="my__viewList__item__text">订阅</Text>
            </View>
        </View>
        <View className="my__pannel">
            <View className="my__pannel__item">
                <Text className="my__pannel__item__label">我的展馆</Text>
                <Text className="ionicons">{"\uf219"}</Text>
            </View>
        </View>
        <View className="my__pannel">
            <TouchableHighlight activeOpacity={0.9} underlayColor="#ccc" onPress={() => { }} >
                <View className="my__pannel__item">
                    <Text className="my__pannel__item__label">意见反馈</Text>
                    <Text className="ionicons">{"\uf219"}</Text>
                </View>
            </TouchableHighlight>
            <View className="my__pannel__line" />
            <TouchableHighlight activeOpacity={0.9} underlayColor="#ccc" onPress={() => { }} >
                <View className="my__pannel__item">
                    <Text className="my__pannel__item__label">优惠券</Text>
                    <Text className="ionicons">{"\uf219"}</Text>
                </View>
            </TouchableHighlight>

            <View className="my__pannel__line" />
            <TouchableHighlight activeOpacity={0.9} underlayColor="#ccc" onPress={() => { }} >
                <View className="my__pannel__item">
                    <Text className="my__pannel__item__label">收货地址</Text>
                    <Text className="ionicons">{"\uf219"}</Text>
                </View>

            </TouchableHighlight>

            <View className="my__pannel__line" />
            <TouchableHighlight activeOpacity={0.9} underlayColor="#ccc" onPress={() => { }} >
                <View className="my__pannel__item">
                    <Text className="my__pannel__item__label">关于我们</Text>
                    <Text className="ionicons">{"\uf219"}</Text>
                </View>

            </TouchableHighlight>
            <View className="my__pannel__line" />
            <TouchableHighlight activeOpacity={0.9} underlayColor="#ccc" onPress={() => { }} >
                <View className="my__pannel__item">
                    <Text className="my__pannel__item__label">设置</Text>
                    <Text className="ionicons">{"\uf219"}</Text>
                </View>
            </TouchableHighlight>

        </View>
        {/* <View className="my__authBtn" >点击认证</View> */}
    </TabScreen>);
};

export default My;